/*
 * @文件描述:账号密码登录页面
 * @公司: 山东大学信息学院
 * @作者: 李洪文
 * @Date: 2019-12-18 14:01:47
 * @LastEditors: 李洪文
 * @LastEditTime: 2020-10-10 10:04:21
 */

import React, {useState} from 'react';
import {View, Text, Input, Button} from 'native-base';
import {StyleSheet} from 'react-native';
import {size, colors} from '@/config';
import {toastFail} from '@/utils/toast';
import Iconfont from '@/components/Iconfont';
import NavigationService from '@/NavigationService';
import {saveToken} from '@/utils/auth';

const px = size.px;

export default () => {
  // TODO: 后面删掉
  const [username, setUsername] = useState('lihongwen');
  const [password, setPassword] = useState('123456');
  // TODO: 记住密码
  // const [rememberPw, setRememberPw] = useState(false);

  const handleLogin = async () => {
    if (!username.trim()) {
      toastFail('请输入账号');
    } else if (!password.trim()) {
      toastFail('请输入密码');
    } else {
      saveToken('token123123');
      NavigationService.navigate('SignedIn');
    }
  };

  return (
    <View style={styles.content}>
      <View style={styles.item}>
        <Iconfont name="call" color={colors.primary} size={px(25)} />
        <Input
          value={username}
          onChangeText={setUsername}
          placeholder="账号"
          placeholderTextColor={colors.fontGray}
        />
      </View>
      <View style={styles.item}>
        <Iconfont name="menber" color={colors.primary} size={px(25)} />
        <Input
          secureTextEntry
          value={password}
          onChangeText={setPassword}
          placeholder="密码"
          placeholderTextColor={colors.fontGray}
        />
      </View>

      <Button block primary onPress={handleLogin} style={styles.loginBt}>
        <Text>登录</Text>
      </Button>
    </View>
  );
};
const styles = StyleSheet.create({
  content: {
    flex: 1,
    padding: px(15),
  },
  item: {
    backgroundColor: colors.disabledColor,
    borderColor: colors.disabledColor,
    borderRadius: 4,
    height: 44,
    marginBottom: px(20),
    paddingLeft: px(12),
    flexDirection: 'row',
    alignItems: 'center',
  },
  loginBt: {
    marginBottom: px(0),
    borderRadius: 4,
    backgroundColor: colors.primary,
  },
  link: {
    textAlign: 'center',
    marginTop: px(20),
    color: colors.primary,
  },
  forgetPass: {
    textAlign: 'right',
    color: colors.primary,
  },
  remember: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end',
    marginBottom: px(50),
  },
  checkBoxWrap: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  checkBox: {
    height: px(18),
    width: px(18),
  },
});
